<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
	// *  对象解构赋值基本语法
	// > 对象的语法形式是在一个赋值操作符= 右边放置一个对象字面量
	// {
	// 	// 字面量
    //     // const {a,b,c}= {a:1,b:2,c:3};// 左侧花括号内包裹的是声明常量的名字
	// 	// console.log(a,b,c);
    //
    //     // 变量或常量
    //     // const obj = {a:1,b:2,c:3};
	// 	// const {a,b,c} = obj;
	// 	// console.log(a,b,c);// 1 2 3
    //
	// 	const obj = {a:1,b:2,c:3};
	// 	let {a,b,c} = obj;
	// 	console.log(a,b,c);// 1 2 3
    // }

	// * 顺序不   用一一对应
	// {
	// 	const {b,a,c} = {a:1,b:2,c:3};
	// 	console.log(a,b,c);// 1 2 3
    // }
	// * = 右侧可以是一个常或变量
	// * 嵌套对象解构
	// 	> 解构嵌套对象仍然与对象字面量的语法相似，可以将对象拆解以获取想要的信息
	// {
	// 	// 方案一
	// 	// const {username,info} = {
	// 	// 	username:"zhangsan",
    //     //     info: {
	// 	// 		age:1
	// 	// 	}
	// 	// };
	// 	// const {age} = info;
	// 	// console.log(username,info,age);// zhangsan {age:1}
    //
    //     // 方案二
	// 	const {username,info:{age}} = {
	// 		username:"zhangsan",
	// 	    info: {
	// 			age:1
	// 		}
	// 	};
	// 	console.log(username,age)
    // }

	// * 可忽略解构源的属性
	// {
	// 	const {a,c}= {a:1,b:2,c:3};
	// 	console.log(a,c);
    // }

	// * 剩余运算符
	// {
	// 	// const {a,b,...obj} = {a:1,b:2,c:3,d:4,e:5};
	// 	// console.log(a,b,obj);// 1 2 {c:3,d:4,e:5}
    //
	// 	// const {a,b,e,...obj} = {a:1,b:2,c:3,d:4,e:5};
	// 	// console.log(a,b,e,obj);// 1 2 5 {c:3,d:4}
    //
    //     // 以下有异常:需要将剩余运算符放置到最后
	// 	const {a,b,...obj,e} = {a:1,b:2,c:3,d:4,e:5};
	// 	console.log(a,b,e,obj);// 1 2 5 {c:3,d:4}
    // }

	// * 不完全解构：变量名称在对象中不存在
	// > 使用解构赋值表达式时，如果指定的变量名称在对象中不存在，那么这个变量会被赋值为undefined
	// {
	//     const {a,b,c,e} = {a:1,b:2,c:3};
	// 	console.log(a,b,c,e);// 1 2 3 undefined
    // }

	// * 解构默认值(常用)
	// > 当指定的属性不存在时，可以定义一个默认值：在属性名称后添加一个等号(=)和相应的默认值即可
	// {
	// 	const {a,b,c,d=9} = {a:1,b:2,c:3,d:10};
	// 	console.log(a,b,c,d);// 1 2 3 10
    // }
	// *  为非同名局部变量赋值 ，可避免命名冲突
	// >  如果希望使用不同命名的局部变量来存储对象属性的值，`ES6`中的一个扩展语法可以满足需求，这个语法与完整的对象字面量属性初始化程序的很像。
	// {
	// 	let username = "zhangsan";
	// 	let {username:name} = {username:"lisi"};
	// 	console.log(name,username);// lisi zhangsan
    // }

	// *  函数传参数
	// > 解构赋值表达式的值与表达式右侧(也就是=右侧)的值相等，
    // 如此一来，在任何可以使用值的地方都可以使用解构赋值表达式
	{
		function fn({a,b,c}){
			console.log(a,b,c)
        }
		fn({a:1,b:2,c:3});
    }

	{
		const obj = {
			username:"zhangsan",
            age:12
        }
		const {username,age} = obj;
		console.log(username);
		console.log(username);
		console.log(age);
    }


</script>
</html>